<!-- 背景 -->
<template>
    <layout-pane label="背景">
        <div class="row-item">
            <si-color-picker
                v-model="backgroundColor"
                label="背景色"
                show-alpha
                class="col-item"
            />
            <si-image-picker
                v-model="backgroundImage"
                type="image"
                add-url
                class="col-item"
            />
        </div>
    </layout-pane>

    <template v-if="['list'].includes(widgetType)">
        <layout-pane label="行背景">
            <div class="row-item">
                <si-color-picker
                    v-model="widget.widgetData.eles.customFeature.lineBackgroundColor"
                    label="背景色"
                    show-alpha
                    class="col-item"
                />
                <si-image-picker
                    v-model="widget.widgetData.eles.customFeature.lineBackgroundImage"
                    label="背景图"
                    type="image"
                    add-url
                    class="col-item"
                />
            </div>
        </layout-pane>
    </template>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import LayoutPane from '@/components/setting-pane/layout-pane'
import {
    SiImagePicker,
    SiColorPicker
} from '@/components/setting-pane/setting-item'
export default defineComponent({
    name: 'RowBackground',
    components: {
        LayoutPane,
        SiImagePicker,
        SiColorPicker
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        const widgetType = computed(() => widget.value?.widgetData?.eles?.type)

        const backgroundColor = computed({
            get: () => {
                let value = widget.value.widgetData.eles.style['background-color']
                return value
            },
            set: val => {
                widget.value.widgetData.eles.style['background-color'] = val
            }
        })

        const backgroundImage = computed({
            get: () => {
                let value = widget.value.widgetData.eles.style['background-image']
                return value
            },
            set: val => {
                widget.value.widgetData.eles.style['background-image'] = val
            }
        })

        return {
            widget,
            widgetType,
            backgroundColor,
            backgroundImage
        }
    }
})
</script>

<style lang="less" scoped>
.row-item {
    display: flex;
    align-items: center;
    & + .row-item {
        margin-top: 10px;
    }
    .col-item {
        & + .col-item {
            margin-left: 12px;
        }
    }
}
</style>